<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>城市智慧停车管理平台</title>
    <link rel="stylesheet" href="css/flex-box.min.css">
    <link rel="stylesheet" href="css/zScrollbar.css">
    <link rel="stylesheet" href="css/number.css">
    <link rel="stylesheet" href="css/indexStyle.css">
</head>
<body>
<div class="container uf uf-ver">
    <div class="header uf">
        <div class="headerSide"><span id="time"></span></div>
        <div class="headerText uf-f"><span>城市智慧停车管理平台</span></div>
        <div class="headerSide" style="text-align: right;"><span>账号001</span></div>
    </div>
    <div class="content uf-f uf">
        <div class="side uf uf-ver">
            <div class="side1 uf uf-ver">
                <div class="title">实时车流量</div>
                <div class="uf-f uf">
                    <div class="uf-f" id="gauge1"></div>
                    <div class="uf-f" id="gauge2"></div>
                </div>
            </div>
            <div class="side2 uf uf-ver">
                <div class="title">各区县总车位数</div>
                <div class="uf-f" id="bar_cars"></div>
            </div>
            <div class="side3 uf-f uf uf-ver">
                <div class="title">热门停车场排名</div>
                <div class="uf-f zScrollBar">
                    <table class="tableList">
                        <thead>
                        <tr>
                            <th>停车场名称</th>
                            <th>日总收益</th>
                            <th>日车流量</th>
                            <th>热度</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>万达广场</td>
                            <td>10.78万元</td>
                            <td>1688辆次</td>
                            <td>
                                <div class="carsHeat">
                                    <div style="width: 100%;" class="carsHot"></div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>鼓楼医院</td>
                            <td>9.68万元</td>
                            <td>1550辆次</td>
                            <td>
                                <div class="carsHeat">
                                    <div style="width: 95%;" class="carsHot"></div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>金鹰世界</td>
                            <td>8.72万元</td>
                            <td>1250辆次</td>
                            <td>
                                <div class="carsHeat">
                                    <div style="width: 90%;" class="carsHot"></div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>金陵饭店</td>
                            <td>6.54万元</td>
                            <td>956辆次</td>
                            <td>
                                <div class="carsHeat">
                                    <div style="width: 85%;" class="carsHot"></div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>锦江之星</td>
                            <td>5.65万元</td>
                            <td>896辆次</td>
                            <td>
                                <div class="carsHeat">
                                    <div style="width: 80%;" class="carsHot"></div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>江苏商厦</td>
                            <td>3.25万元</td>
                            <td>583辆次</td>
                            <td>
                                <div class="carsHeat">
                                    <div style="width: 75%;" class="carsHot"></div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>华威大厦</td>
                            <td>2.25万元</td>
                            <td>386辆次</td>
                            <td>
                                <div class="carsHeat">
                                    <div style="width: 70%;" class="carsHot"></div>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="center uf-f uf uf-ver">
            <div class="center1 uf-f uf uf-ver">
                <div id="mapContainer"></div>
                <div class="mapOver">
                    <div class="title">当日交易发生额</div>
                    <div id="numbers"></div>
                </div>
                <div class="uf-f uf uf-ver MarT mapOver">
                    <div class="title">收入</div>
                    <div class="uf-f" id="line_income"></div>
                </div>
                <div class="uf-f uf uf-ver MarT mapOver">
                    <div class="title">支付方式</div>
                    <div class="uf-f" id="pie_pay"></div>
                </div>
            </div>
            <div class="center2 uf uf-ver">
                <div class="uf">
                    <div class="uf-f">实时车位情况</div>
                    <div class="hasCar">有车(<span class="hasCarNum">12</span>)</div>
                    <div class="noCar">空闲(<span class="noCarNum">25</span>)</div>
                </div>
                <div class="uf-f uf uf-ver">
                    <div class="roadSide"></div>
                    <div class="parking zScrollBar">
                        <div id="parking">

                        </div>
                    </div>
                    <div id="roadName" class="road uf-f uf uf-ac uf-pc"></div>
                </div>
            </div>
        </div>
        <div class="side uf uf-ver">
            <div class="side1" id="bar_counts"></div>
            <div class="side2 uf uf-ver">
                <div class="title">设备品牌占比排名</div>
                <div class="uf-f" id="bar_brands"></div>
            </div>
            <div class="side3 uf-f uf uf-ver">
                <div class="title">车辆进出状态</div>
                <div class="uf-f zScrollBar">
                    <table class="tableList">
                        <thead>
                        <tr>
                            <th>车牌号</th>
                            <th>状态</th>
                            <th>停车场名称</th>
                            <th>时间</th>
                        </tr>
                        </thead>
                        <tbody id="carChangeNotify">
                        <tr>
                            <td>苏A 34565</td>
                            <td class="carIn">进入</td>
                            <td>鼓楼医院</td>
                            <td>06-25 12:34</td>
                        </tr>
                        <tr>
                            <td>苏A 26PSY</td>
                            <td class="carOut">离开</td>
                            <td>万达广场</td>
                            <td>06-25 12:34</td>
                        </tr>
                        <tr>
                            <td>苏E F6655</td>
                            <td class="carIn">进入</td>
                            <td>金鹰世界</td>
                            <td>06-25 12:34</td>
                        </tr>
                        <tr>
                            <td>苏H 346FB</td>
                            <td class="carOut">离开</td>
                            <td>万达广场</td>
                            <td>06-25 12:34</td>
                        </tr>
                        <tr>
                            <td>苏L 35657</td>
                            <td class="carIn">进入</td>
                            <td>锦江之星</td>
                            <td>06-25 12:34</td>
                        </tr>
                        <tr>
                            <td>苏E 26855</td>
                            <td class="carOut">离开</td>
                            <td>万达广场</td>
                            <td>06-25 12:34</td>
                        </tr>
                        <tr>
                            <td>苏G 23675</td>
                            <td class="carIn">进入</td>
                            <td>金陵饭店</td>
                            <td>06-25 12:34</td>
                        </tr>
                        <tr>
                            <td>苏B 567SK</td>
                            <td class="carOut">离开</td>
                            <td>江苏商厦</td>
                            <td>06-25 12:34</td>
                        </tr>
                        <tr>
                            <td>苏A F9527</td>
                            <td class="carIn">进入</td>
                            <td>鼓楼医院</td>
                            <td>06-25 12:34</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jqResize.min.js"></script>
<script src="js/zScrollbar.min.js"></script>
<script src="js/number.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/suzhou.js"></script>
<script src="js/tool.js"></script>
<script src="js/main.js"></script>
<script>
    $(function () {

        var peopleNum = 2566;
        numRoll(peopleNum); //大数字显示
        setInterval(function () { //模拟数量变化
            peopleNum = peopleNum + Math.ceil(Math.random() * 400);
            numRoll(peopleNum);
        }, 1000 * 10);

        draw_gauge("gauge1", "今日进场", 7500, 8000); //绘制今日进场仪表图
        draw_gauge("gauge2", "今日出场", 5000, 8000); //绘制今日出场仪表图

        var data_cars = [
            {
                name: '吴中区',
                value: 600
            },
            {
                name: '相城区',
                value: 700
            },
            {
                name: '姑苏区',
                value: 1000
            },
            {
                name: '工业园区',
                value: 900
            },
            {
                name: '高新区',
                value: 800
            },
            {
                name: '吴江区',
                value: 400
            }
        ];
        draw_barCars("bar_cars", data_cars); //绘制各区县总车位数柱状图

        var data_brands = [
            {
                name: '上海苏通',
                value: 1000
            },
            {
                name: '江苏九比特',
                value: 900
            },
            {
                name: '深圳东陆',
                value: 800
            },
            {
                name: '武汉拓宝',
                value: 680
            },
            {
                name: '杭州艾佳',
                value: 560
            },
            {
                name: '方格儿',
                value: 460
            }
        ];
        draw_barBrands("bar_brands", data_brands); //绘制品牌占比柱状图

        draw_barCount("bar_counts", 4400, 12, 1256, 4400); //绘制设备、车位数量统计柱状图

        var data_income = [
            {
                name: '1月',
                value: (new Date).getMonth() + 2 > 1 ? Math.ceil(Math.random() * 400 + 100) : 0
            },
            {
                name: '2月',
                value: (new Date).getMonth() + 2 > 2 ? Math.ceil(Math.random() * 400 + 100) : 0
            },
            {
                name: '3月',
                value: (new Date).getMonth() + 2 > 3 ? Math.ceil(Math.random() * 400 + 100) : 0
            },
            {
                name: '4月',
                value: (new Date).getMonth() + 2 > 4 ? Math.ceil(Math.random() * 400 + 100) : 0
            },
            {
                name: '5月',
                value: (new Date).getMonth() + 2 > 5 ? Math.ceil(Math.random() * 400 + 100) : 0
            },
            {
                name: '6月',
                value: (new Date).getMonth() + 2 > 6 ? Math.ceil(Math.random() * 400 + 100) : 0
            },
            {
                name: '7月',
                value: (new Date).getMonth() + 2 > 7 ? Math.ceil(Math.random() * 400 + 100) : 0
            },
            {
                name: '8月',
                value: (new Date).getMonth() + 2 > 8 ? Math.ceil(Math.random() * 400 + 100) : 0
            },
            {
                name: '9月',
                value: (new Date).getMonth() + 2 > 9 ? Math.ceil(Math.random() * 400 + 100) : 0
            },
            {
                name: '10月',
                value: (new Date).getMonth() + 2 > 10 ? Math.ceil(Math.random() * 400 + 100) : 0
            },
            {
                name: '11月',
                value: (new Date).getMonth() + 2 > 11 ? Math.ceil(Math.random() * 400 + 100) : 0
            },
            {
                name: '12月',
                value: (new Date).getMonth() + 2 > 12 ? Math.ceil(Math.random() * 400 + 100) : 0
            }
        ];
        draw_lineIncome("line_income", data_income); //绘制收入折线区域图

        var data_pay = [
            {value: 555, name: '微信'},
            {value: 469, name: '支付宝'},
            {value: 234, name: '银联'},
            {value: 0, name: '信用卡'},
            {value: 105, name: '现金'}
        ];
        draw_piePay("pie_pay", data_pay); //绘制支付方式饼状图

        var data_mapPark = [
            {
                "id": "1",
                "name": "忠武路停车场",
                "roadName": "忠武路",
                "value": [120.716675, 31.570865, 18]
            },
            {
                "id": "2",
                "name": "汉中路停车场",
                "roadName": "汉中路",
                "value": [120.646535, 31.312322, 30]
            },
            {
                "id": "3",
                "name": "汉东路停车场",
                "roadName": "汉东路",
                "value": [120.806361, 31.505865, 60]
            }
        ];
        drawChart_map("mapContainer", data_mapPark, function (param) {
            // console.log(param);
            var componentType = param.componentType;
            if (componentType != "series") return; //点击的不是标记点，停止执行
            var roadName = param.data.roadName;
            var value = param.data.value[2];

            getParks(value, roadName); //模拟获取车位

        }); //绘制eCharts地图

        getParks(18, '忠武路'); //模拟获取车位

    });


    //车辆变化模拟
    $(function () {
        var $tBody = $("#carChangeNotify"), $trs = $("#carChangeNotify tr");
        if ($trs && $trs.length) {
            $trs.each(function (index, item) {
                $(item).find('td:last-child').html(new Date().format("MM-dd hh:mm:ss"));
            });
        }
        setInterval(function () {
            var $ntrs = $("#carChangeNotify tr");
            if ($ntrs && $trs.length) {
                var $last = $($ntrs[$ntrs.length - 1]);
                $last.find('td:last-child').html(new Date().format("MM-dd hh:mm:ss"));
                var $clone = $last;
                $last.remove();
                $tBody.prepend($clone);
            }
        }, 1000 * 5);
    });

</script>
</body>
</html>